<template>
  <view class="container">
    <view class="container-box">
      <message-search></message-search>
      <view class="tab">
        <pending-tab :tab-type="tabType" @pendSelect="getPendListBytype" @tabChange="getPendListBytab" @activeNum="getActiveNum" @update="getApprovalListBytype"></pending-tab>
      </view>
    </view>
    <empty-state v-if="!isLoading && pendList.length === 0" text="暂无申请记录"></empty-state>
    <!-- 消息列表 -->
    <scroll-view
      refresher-enabled 
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      style="min-height: 100vh;">
      <approval-list :DataList="pendList" v-if="!isRefreshing" @view-edit="handleViewEdit" @view-detail="handleViewDetail"></approval-list>
        <view v-if="isRefreshing" class="loading-mask">
          <view class="loading-content">
            <view class="loading-spinner"></view>
            <text>正在加载...</text>
          </view>
        </view>
    </scroll-view>
    <!-- 抽屉封装 -->
    <pending-drawer ref="show" @submit="updateSumbit"></pending-drawer>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabType: '',
        scrollY: true,
        pendList: [],
        total: 0,
        queryObj: {
          page: 1,
          pageSize: 3,
          type: '',
          deptId: '',
          approvalStatus:0,
          revokeStatus: '',
          extensionStatus: ''
        },
        isRefreshing: false,
        isLoading:false,
        active: 1
      };
    },
    onLoad(options) {
      this.tabType = options.type
      this.getPendList()
    },
    onReachBottom() {
      if(this.queryObj.page * this.queryObj.pageSize >=this.total) return uni.$showMsg('数据加载完毕!!')
      if(this.isLoading) return
      this.queryObj.page += 1
      this.getPendList()
    },
    methods: {
      async getPendList(cb) {
        this.ResertScorll()
        this.isLoading = true
        const res = await uni.$http.get('/approval',this.queryObj)
        this.pendList = [...this.pendList,...res.data.data.row]
        this.total = res.data.data.total
        this.isLoading = false
        cb&&cb()
      },
      getApprovalListBytype(e) {
        console.log(e)
      },
      updateSumbit(){
        this.pendList.length = 0
        this.getPendList()
      },
      getPendListBytype(e) {
        this.queryObj.type = e
        this.pendList.length = 0
        this.getPendList()
      },
      getPendListBytab(e) {
        this.clear()
        if(e !== 'origin') {
          Object.keys(e).forEach(key => {
            if (e[key] !== null && e[key] !== undefined && e[key] !== '') {
              this.queryObj[key] = e[key];
            }
          });
        }else {
          this.queryObj.approvalStatus = 0
        }
        this.getPendList()
      },
      getActiveNum(num) {
        this.active = num
      },
      clear() {
        this.pendList = []
        this.queryObj.approvalStatus = '',
        this.queryObj.extensionStatus = '',
        this.queryObj.revokeStatus = ''
      },
      onRefresh() {
        this.pendList = []
        this.isRefreshing = true
        this.queryObj.page = 1
        this.getPendList(()=> {this.isRefreshing = false})
      },
          // 刷新状态恢复
      onRestore() {
        this.isRefreshing = false; // 恢复默认状态
      },
      handleViewDetail(item) {
        item.sort = 'pending'
        uni.navigateTo({
          url: `/pages/form-detail/form-detail?List=${JSON.stringify(item)}`
        })
      },
      handleViewEdit(item) {
        if(this.active !== null) {
          item.active = this.active
        }
        this.$refs.show.showDrawer(item)
      },
      ResertScorll() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff6f0;
    min-height: 100vh;
    .container-box {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 999;
      background-color: #fff;
      width: 100%;
      box-shadow: 0 2rpx 24rpx rgba(0,0,0,0.05);
    }
    .loading-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      // background-color: rgba(255, 255, 255, 0.9);
      background-color: #fff6f0;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      
      .loading-content {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333;
      }
      
      .loading-spinner {
        width: 20px;
        height: 20px;
        border: 3px solid #ccc;
        border-top-color: #333;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-right: 10px;
      }
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
</style>
